<template>
  <div class="home">
    <div style="height:40px">
      <div class="back">
        <router-link style="text-decoration: none" to="/index"><< 返回</router-link>
      </div>
    </div>
    <div class="margin">
      <div class="title">
        <div class="titleContent">
          <h1> {{ blogInfo.title }}</h1>
        </div>
      </div>
      <div class="name-collection">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              {{ uName }}
            </div>
          </el-col>
          <el-col :span="8">
          </el-col>
          <el-col :span="6">
            <div @click="operation()">{{ blogInfo.isCollection }}</div>
          </el-col>
        </el-row>

      </div>
      <div class="tag">
        <el-tag v-for="tagItem in blogInfo.tag" :key="tagItem.name">
          {{ tagItem.name }}
        </el-tag>
      </div>
      <el-divider></el-divider>
      <div class="editor" v-html="blogInfo.content">
        {{ blogInfo.content }}
      </div>
      <div class="footer">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="6" :offset="8">
            <div>创建时间:{{ blogInfo.createTime }}</div>
          </el-col>
          <el-col :span="6" :offset="4">
            <div>更新时间:{{ blogInfo.updateTime }}</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: null,
      uName: '',
      blogInfo: {},
    }
  }, // z-index
  methods: {
    //收藏操作
    operation() {
      if (this.blogInfo.isCollection === "收藏") {
        this.$set(this.blogInfo,'isCollection','已收藏');
        this.$forceUpdate()
        console.log(this.blogInfo.isCollection);
        let curUser = localStorage.getItem("userid")
        // console.log("curUser:" + curUser)
        this.$api.insertUserBlog({
          blogId: this.blogInfo.id,
          userId: curUser
        }).then(res => {
          if (res.code === 200) {

          }
        });
      } else {
        this.$set(this.blogInfo,'isCollection','收藏');
        this.$forceUpdate()
        console.log(this.blogInfo.isCollection);
        let curUser = localStorage.getItem("userid")
        this.$api.deleteUserById({
          bid: this.blogInfo.id,
          uid: curUser,
        }).then(res => {
          if (res.code === 200) {

          } else {
            this.$message({
              message: '失败',
              type: 'error'
            });
          }
        });
      }

    },
    getUserInfoById(uid) {
      this.$api.getUserInfoById({
        uid
      }).then(res => {
        if (res.code === 200) {
          this.uName = res.data.userName;
          console.log(this.uName)

        } else {
          this.$message({
            message: '未知错误',
            type: 'error'
          });
        }
      });
    },

  },
  computed: {},
  watch: {

    blogInfo: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        console.log(newVal.isCollection + '--' + newVal.c)
      }


    }
  },

  mounted() {


  },
  created() {
    console.log('itemBlog:' + this.$route.params.itemBlog);
    const regex = new RegExp('<img', 'gi')
    // res.details = details.replace(regex, `<img style="max-width: 100%; height: auto"`);
    if (this.$route.params.item) {
      this.blogInfo = this.$route.params.item
      this.blogInfo.content = this.blogInfo.content.replace(regex, `<img style="max-width: 60%; height: auto"`);
    } else if (this.$route.params.itemBlog) {
      this.blogInfo = this.$route.params.itemBlog
      this.blogInfo.content = this.blogInfo.content.replace(regex, `<img style="max-width: 60%; height: auto"`);
    }

    this.copyBlogInfo = this.blogInfo;
    this.getUserInfoById(this.blogInfo.userId);


  }
}
</script>
<style scoped lang="scss">
.home {
  background-color: beige;
  width: 1200px;
  margin: auto;

  //.editor {
  //
  //  margin-bottom: 30px;
  //}

  .back {
    font-size: 13px;
    color: rgb(199, 194, 188);
    direction: none;
    padding-left: 20px;
  }
}

.title {
  margin-bottom: 10px;

}

.margin {
  width: 90%;
  margin: auto;
}

.tag {
  margin-bottom: 10px;
  margin-top: 10px;
}

.editor {
  //background-color: #42b983;
  width: 100%;
  min-height: 800px;

  img {
    width: 200px;
    height: 100px;
  }
}

.footer {

  font-size: 12px;
  color: rgba(5, 48, 48, 0.199);
  padding-bottom: 20px;
}

.name-collection {
  font-size: 13px;
  color: #a0a4ac;
}
</style>
